Okay.
So today we are going to start off looking at GIS.
Now this will be a it will be split into two parts.
So the first lesson kind of introduce you to them and show you about a couple of different objects.
But we will be looking at more objects next lesson.
Okay.
So what are GIS now GIS stand for graphical user interfaces.
And basically what that means is they are items that the player can interact with on their screen.
Now there's already actually GIS, um, in Roblox by default if we go ahead and play the game.
You can see that up here.
These are guys.
They are items that you can interact with and we can make our own ones.
Now we're going to introduce you to how to make your own ones in these two lessons.
However, in order to do it properly, you'll need to script them.
So this is more of an introduction and we will properly look at them in the scripting section.
Okay, so guys are found in starter GUI okay.
And how it works is you can click the plus here.
And the first thing you need to add is a screen guy okay.
So search up screen guy and add that in there.
The reason why you need to add a screen guy first is because.
You might have separate GUIs for different things.
For example, if you enter a car, you might want a GIS to pop up, maybe one to press a horn or stuff
like that.
But if you enter maybe a game, you might want different guys coming up.
So they're basically different screens that you can have on or off depending on what you want enabled.
Okay.
Um, so any GUI objects will go inside a screen GUI and a screen GUI goes inside starter gui.
Okay.
Um, a the screen GUI itself doesn't have too many properties.
You need to know enabled is whether it will be displayed or not.
So most likely you want that on um, name and parent.
Obviously we already know what they do and ignore GUI.
Null set is another one which sounds a bit complicated, but all it means is when you play the game,
there is a little bar at the top here, um, which if ignored GUI null set is off.
It will not include that bar.
So if you want GUIs which cover the entire screen, that will have to be on, and I usually recommend
turning that one on, okay.
And it's not on by default, so you will have to change that okay.
So the main object for GUIs are frames okay.
So let's add a frame in.
So go over to the screen GUI.
Click the plus.
Search up a frame and left click okay.
Now there are some different types of frames.
There's a scrolling frame, but again we will look at those later on okay.
And this is our frame here.
You can see it show up on on my screen here okay.
Um now a frame is essential for GUIs.
The reason why it is so essential is because every other object that you add in is just a frame, but
with other stuff.
For example, um, you can add in a text label which allows you to type up text, which is just a frame
with text inside of it.
Okay.
So the properties are very similar to frames when they are for any other object, and the idea of them
are very similar.
So we're going to spend a bit more time looking at the frame and then go through the other ones a little
bit quicker.
Okay.
Um, so first off, um, let's have a look at, let's go down to position and size as these are two
important properties which um, probably you might find the not the trickiest to learn, but is the
newest thing with guys.
Okay.
Um, if we open up the position, for example, we can see that we have two, two values for x and two
values for y.
Okay.
And if we open up each one, we can see that we have an x scale, an x offset a y scale and a y offset.
So there's two different types of x coordinate or y coordinate which all sounds a bit confusing, but
hopefully you understand it a bit more once I've explained it.
So um, the difference between scale and offset.
Okay, you can use one or the other or both.
Okay.
But the difference between the two is, um, there are different ways to position stuff on your screen.
Okay.
Scale, um, uses a value from 0 to 1 based on how large your screen is.
Okay.
So a scale of one is one screen length.
My screen here is 881 studs across.
Okay.
That's the length of my screen.
If I adjust the length of my screen, the position will adjust as well.
So it's dependent on how large your screen is basically.
Okay.
So a scale of one is one screen length okay.
A scale of 0.5 is half a screen length okay.
And this will change depending on what device you're looking at this on.
So if you're looking at this on a computer or you're looking at it on a desktop, a tablet, a phone,
it will always be one screen length, even though the screens are much smaller.
Okay, offset just uses studs, so an offset of five is five studs.
Okay.
And various five studs will be different depending on what device you're looking at this on.
Okay.
So in this case now we've done one screen length or half a screen length to the middle here.
And then an extra five across as well.
Okay.
If we were to just use offsets and maybe put it to be about 100 looks something like that.
Okay.
So there are two.
They're basically two different ways to position and scale.
Guy objects.
Now, which one should you use?
Usually the answer is scale.
Okay.
Um.
In my time, making GIS a mistake, a lot of people make is that they use offset to position and scale
them because they just.
If you if you drag it around like this, it's automatically it automatically use offset rather than
scale.
And the reason why you don't want to use offset is because it's different for different devices.
Okay.
So how have we how how have these user interfaces look on your computer or whatever device you're using
Roblox studio on will look very different to a different device.
Okay.
It could even take up the entire screen space.
It could be off the screen.
Um, so it would only work for you specifically.
So nine times out of ten, you are going to be wanting to use scale.
Only time you might want to use offsets is for very small, um, sizes and measurements, but usually
it is scale.
But we are looking at okay, so let's position our frame in the center of our screen okay.
So let's set the x scale to be 0.5 and the y scale to be 0.5.
Okay.
You'll probably notice something, even though I wanted it to be half a screen length along the X which
is going horizontally.
Okay.
And I've put it to be half a screen length along the Y, which is vertically.
My frame is not in the middle, okay.
It's it's off the middle by a bit by a little bit.
The reason that is, is because of its anchor point, which is the property I skipped out up here.
So its anchor point is where the position and size is taken from.
So with your parts it's automatically it's automatically taken from the center.
So a parts proper position of 000, it's the middle of the part is at the center of your game.
However with guys um, in this case the top left corner is in the middle, but the actual frame itself
is not.
So to put this in the middle, we want to change the anchor point.
We want to change where it's taken the position from to be center.
And anchor point is very similar to scale.
It does it based on the length.
So it's a value from 0 to 1.
Um, if I was to put here one on the x it would be the right corner and so on.
So it's the length of your frame.
So let's put 0.5 and 0.5.
And our frame is now in the middle okay.
So most of the time you are wanting to you are going to use a anchor point of 0.5 and 0.5.
But it does just depend on the situation.
You might find it easier sometimes to move the anchor point somewhere else.
Okay, but be aware of that when you are looking at the position and the size properties.
Okay, let's go down to size then.
And it opened these two up, and it's the same kind of thing.
Okay.
It uses offset by default.
But let's get rid of that and let's put in a scale instead.
So let's say I want it to be sized 0.3 screen lengths and vertically 0.4 screen lengths.
And my frame looks something like this here.
Okay.
Um, so again, even though it can be a bit more difficult, I'd always recommend using scale for most
things.
Okay.
Um, let's have a look at some other properties that we skipped through.
Okay.
Um, background color is the color of our frame.
So we can click on this and change the color like this here.
Okay.
Um, background transparency, exact same as transparency is how transparent the background of this
is.
Okay.
So we change this to 0.5.
And you can see through it see through the frame now.
Okay.
Quite a lot of guys you might want to see through if they take up quite a large space on your screen
so the player can still see what's going on behind them.
Okay.
Um, border color and border size pixel are two of the borders of your frame.
So your frame can contain a border.
And you can change the size of this border by changing the border size pixel property.
Okay.
And these are just whole numbers.
So 12345.
You can't pick like 1.1 for example for this.
Okay.
Change it ten.
And you can see the border appear just there.
Okay.
And you can change the border color here if you wanted to.
Okay I'm going to leave it to black.
But you can change it here if you want to.
And you've also got the border mode, which basically is if the border is outside the size, um, inside
the size of your, of the frame or between the middle.
Okay.
Usually you want it on the out, but for some things you might want it inside.
Okay.
Um.
Layout order.
Um, we're going to skip over because it's very similar to another property, which you're probably
a bit more familiar with.
Name and parent.
We already know what those are.
Rotation.
This just has one single number for rotation which how much you can obviously rotate it by.
So 45 degrees and it's flipped like that.
Okay.
Um visible is just a tick property whether it's on or not.
Okay.
Z index is the exact same as layout order.
They're both very similar properties.
Okay.
High of a z index value.
The further forward it would be.
So it will display over other frames.
Okay.
So set them all to be one.
And if you do want one in front you can set it to two or so on.
Okay.
And that is it.
Okay.
They are all of your properties for frames.
Okay.
So frames might seem a bit or guys in general might seem um, a little bit difficult to start off with
because we've mostly been looking at parts and other physical objects.
This is the first time we'll be looking at a non physical object.
Um, but a lot of the properties do link to properties we've looked at with parts and those most of
those you will look at next lesson as well, along with some other ones to do with text images and that
kind of stuff.
Okay, so join me in the next lesson where we will continue looking at guys.